<template>
<div>
  <div
    ref="dragWrapper"
    class="org-tree-drag-wrapper"
    @mousedown="mousedownView"
    @contextmenu="handleDocumentContextmenu"
  >
    <div class="org-tree-wrapper">
      <v-org-tree
        v-if="data"
        :data="data"
        :node-render="nodeRender"
        :expand-all="true"
        collapsable
      ></v-org-tree>
    </div>
  </div>
</div>
</template>

<script>
const menuList = [
  {
    key: 'edit',
    label: '编辑部门'
  },
  {
    key: 'detail',
    label: '查看部门'
  },
  {
    key: 'new',
    label: '新增子部门'
  },
  {
    key: 'delete',
    label: '删除部门'
  }
]
export default {
  name: 'OrgView',
  props: {
    zoomHandled: {
      type: Number,
      default: 1
    },
    data: Object
  },
  data () {
    return {
      currentContextMenuId: '',
      orgTreeOffsetLeft: 0,
      orgTreeOffsetTop: 0,
      initPageX: 0,
      initPageY: 0,
      oldMarginLeft: 0,
      oldMarginTop: 0,
      canMove: false,
      modal2: false
    }
  },
  computed: {
    orgTreeStyle () {
      return {
        transform: `translate(-50%, -50%) scale(${this.zoomHandled}, ${
          this.zoomHandled
        })`,
        marginLeft: `${this.orgTreeOffsetLeft}px`,
        marginTop: `${this.orgTreeOffsetTop}px`
      }
    }
  },
  methods: {
    handleNodeClick (e, data, expand) {
    	this.lookDetail(data)
      //expand(false)
    },
    closeMenu () {
      this.currentContextMenuId = ''
    },
    getBgColor (data) {
      return this.currentContextMenuId === data.id
        ? data.isRoot
          ? '#0d7fe8'
          : '#5d6c7b'
        : ''
    },
    nodeRender (h, data) {
      return (
        <div class={['animated rollIn delay-1s','custom-org-node',data.children && data.children.length ? 'has-children-label' : '']}
          style={{backgroundColor:data.backgroudcolor}}
          on-mousedown={event => event.stopPropagation()}
          on-contextmenu={this.contextmenu.bind(this, data)}>
            <el-row type="flex" justify="center" class="row-bg">
				<el-col span={10}><div class="grid-content bg-purple">{data.company_name}</div></el-col>
			</el-row>
            <el-row class="row-bg">
				<el-col span={10}><div style="letter-spacing: 5px;">网格长：</div></el-col>
			    <el-col span={11}><div>{data.name?data.name:'无'}</div></el-col>
			</el-row>
            <el-row class="row-bg">
				<el-col span={10}><div>联系电话：</div></el-col>
			    <el-col span={11}><div>{data.mobile?data.mobile:'无'}</div></el-col>
			</el-row>
            <el-row class="row-bg">
				<el-col span={10}><div>排污单位：</div></el-col>
			    <el-col span={11}><div>{data.qy_num?data.qy_num:'无'}</div></el-col>
			</el-row>
            <el-row class="row-bg">
				<el-col span={10}><div style="letter-spacing: 5px;">网格员：</div></el-col>
			    <el-col span={11}><div>{data.wgy_num?data.wgy_num:'无'}</div></el-col>
			</el-row>
            <el-row class="row-bg">
				<el-col span={10}><div>下集网格：</div></el-col>
			    <el-col span={11}><div>{data.xjwg_num?data.xjwg_num:'无'}</div></el-col>
			</el-row>
        </div>
      )
    },
	  lookDetail(data){
        this.$emit('showdetail', data);
    	console.log(data,'点击查看详情')
      },
    inNextTree(data){
        console.log(data,'双击事件')
    },
    contextmenu (data, $event) {
      let event = $event || window.event
      console.log('执行了双击事件', data, event)
      // TODO 调用外部方法，更改数据
      this.$emit('innext',data)
      event.preventDefault
        ? event.preventDefault()
        : (event.returnValue = false)
      this.currentContextMenuId = data.id
    },
    setDepartmentData (data) {
      data.isRoot = true
      this.departmentData = data
    },
    mousedownView (event) {
      this.canMove = true
      this.initPageX = event.pageX
      this.initPageY = event.pageY
      this.oldMarginLeft = this.orgTreeOffsetLeft
      this.oldMarginTop = this.orgTreeOffsetTop
      this.$util.on(document, 'mousemove', this.mousemoveView)
      this.$util.on(document, 'mouseup', this.mouseupView)
    },
    mousemoveView (event) {
      if (!this.canMove) return
      const { pageX, pageY } = event
      this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX
      this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY
    },
    mouseupView () {
      this.canMove = false
      this.$util.off(document, 'mousemove', this.mousemoveView)
      this.$util.off(document, 'mouseup', this.mouseupView)
    },
    handleDropdownClick (event) {
      event.stopPropagation()
    },
    handleDocumentContextmenu () {
      this.canMove = false
    },
    handleContextMenuClick (data, key) {
      this.$emit('on-menu-click', { data, key })
    }
  },
  mounted () {
	  this.$util.on(document, 'contextmenu', this.handleDocumentContextmenu)
  },
  beforeDestroy () {
	  this.$util.off(document, 'contextmenu', this.handleDocumentContextmenu)
  }
}
</script>
<style>
    @import "../../../assets/animate.css";
    .el-card__body .department-outer .view-box .org-tree-wrapper .org-tree-node-label .org-tree-node-label-inner .custom-org-node{
        padding: 14px 20px;
        text-align: left;
        min-width: 180px;
    }
    .bg-purple.grid-content {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .department-outer .view-box .org-tree-wrapper .org-tree-node-label .org-tree-node-label-inner {
        padding: 0;
        border: 3px solid #46acc6;
    }
</style>
